<template>
  <el-row class="menu">
    <el-col width="200px">
      <h5 class="menu-title">数据可视化</h5>
      <el-menu
          router
          default-active="/Movies/Category"
          class="el-menu-vertical-demo"

      >
        <el-sub-menu>
          <template #title>
            <el-icon><menu-icon /></el-icon>
            <span>电影类型分析</span>
          </template>
          <!-- 二级开始 -->
          <el-menu-item index="/Movies/Category/All">
            平均评分排行及高分类型占比
          </el-menu-item>
          <el-menu-item index="/Movies/Category/Every">
            各类型top10电影
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/Movies/Top50Movies">
          <el-icon><medal /></el-icon>
          <template #title>电影top50排行榜</template>
        </el-menu-item>

        <el-menu-item index="/Movies/AnnualReport">
          <el-icon><document /></el-icon>
          <template #title>各年份电影发行数量</template>
        </el-menu-item>

        <el-menu-item index="/Movies/Company">
          <el-icon><setting /></el-icon>
          <template #title>制作公司分析</template>
        </el-menu-item>

        <el-menu-item index="/Movies/Director">
          <el-icon><camera /></el-icon>
          <template #title>电影导演分析</template>
        </el-menu-item>
      </el-menu>
    </el-col>

  </el-row>
</template>

<script setup>
import {
  Medal,
  Document,
  Menu as MenuIcon,
  Setting,
  Camera,
} from '@element-plus/icons-vue'

</script>

<style scoped>
.menu-title {
  margin-left: 2vw;
  margin-top: 2.5vh;
  font-size: 1rem;      /* 字体大小为 4 倍根元素字体大小 */
  font-weight: 600;     /* 字体粗细为 900 (最粗) */
  color: #3c3c3c;
  margin-bottom: 1.5vh;
}

/* 调整菜单项整体文字大小 */
:deep(.el-menu-item),
:deep(.el-sub-menu__title){
  font-size: 1rem;
  height: 7vh;
  line-height: 50px;
}

:deep(.el-menu-item .el-icon),
:deep(.el-sub-menu__title .el-icon){
  margin-left: 0.6vw;
}

/* 调整菜单项文字位置 */
:deep(.el-menu-item .el-menu-item__content) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
  position: relative;
}

/* 调整子菜单项文字样式 */
:deep(.el-sub-menu .el-menu-item) {
  font-size: 0.9rem;
  height: 7vh;
  line-height: 50px;
  padding-left: 50px;
}
</style>
